<template>
  <div>
    <h1>Social Features</h1>
    <form @submit.prevent="createSocialFeature">
      <div>
        <label for="friendId">Friend ID:</label>
        <input type="number" v-model="friendId" required />
      </div>
      <div>
        <label for="postId">Post ID:</label>
        <input type="number" v-model="postId" required />
      </div>
      <div>
        <label for="message">Message:</label>
        <textarea v-model="message" required></textarea>
      </div>
      <button type="submit">Create</button>
    </form>
  </div>
</template>

<script>
import api from '@/services/api';

export default {
  name: 'SocialFeatures',
  data() {
    return {
      friendId: '',
      postId: '',
      message: '',
    };
  },
  methods: {
    async createSocialFeature() {
      try {
        const socialFeature = {
          userId: this.$store.getters.user.id,
          friendId: this.friendId,
          postId: this.postId,
          message: this.message,
        };
        await api.createSocialFeature(socialFeature);
        alert('Social feature created successfully');
      } catch (error) {
        console.error('Error creating social feature:', error);
      }
    },
  },
};
</script>
